<template>
	<view class="mine-container">
		<!-- 用户信息区域 -->
		<view class="user-card">
			<view class="user-header">
				<view class="avatar-section">
					<image class="avatar" src="/static/avatar-default.png" mode="aspectFill"></image>
					<view class="edit-avatar">
						<uni-icons type="camera-filled" size="16" color="#fff"></uni-icons>
					</view>
				</view>
				<view class="info">
					<view class="nickname-row">
						<text class="nickname">{{userInfo.nickname}}</text>
						<uni-icons type="edit" size="16" color="#666" @click="handleEditProfile"></uni-icons>
					</view>
					<text class="user-id">ID: {{userInfo.userId}}</text>
				</view>
			</view>
			<view class="user-stats">
				<view class="stat-item">
					<text class="number">{{userInfo.deviceCount}}</text>
					<text class="label">我的设备</text>
				</view>
				<view class="stat-item">
					<text class="number">{{userInfo.sceneCount}}</text>
					<text class="label">场景模式</text>
				</view>
				<view class="stat-item">
					<text class="number">{{userInfo.notificationCount}}</text>
					<text class="label">未读消息</text>
				</view>
			</view>
		</view>

		<!-- 功能菜单区域 -->
		<view class="menu-section">
			<view class="menu-group">
				<view class="menu-item" @click="handleMenu('account')">
					<view class="menu-left">
						<uni-icons type="person" size="20" color="#007AFF"></uni-icons>
						<text class="menu-title">账号管理</text>
					</view>
					<view class="menu-right">
						<text class="menu-desc">安全设置</text>
						<uni-icons type="right" size="16" color="#999"></uni-icons>
					</view>
				</view>
				<view class="menu-item" @click="handleMenu('notification')">
					<view class="menu-left">
						<uni-icons type="notification" size="20" color="#07C160"></uni-icons>
						<text class="menu-title">消息通知</text>
					</view>
					<view class="menu-right">
						<text class="menu-badge" v-if="userInfo.notificationCount > 0">{{userInfo.notificationCount}}</text>
						<uni-icons type="right" size="16" color="#999"></uni-icons>
					</view>
				</view>
				<view class="menu-item" @click="handleMenu('scenes')">
					<view class="menu-left">
						<uni-icons type="star" size="20" color="#FFB700"></uni-icons>
						<text class="menu-title">场景管理</text>
					</view>
					<view class="menu-right">
						<text class="menu-desc">{{userInfo.sceneCount}}个场景</text>
						<uni-icons type="right" size="16" color="#999"></uni-icons>
					</view>
				</view>
				<view class="menu-item" @click="handleMenu('about')">
					<view class="menu-left">
						<uni-icons type="info" size="20" color="#666666"></uni-icons>
						<text class="menu-title">关于我们</text>
					</view>
					<view class="menu-right">
						<text class="menu-desc">版本 1.0.0</text>
						<uni-icons type="right" size="16" color="#999"></uni-icons>
					</view>
				</view>
			</view>
		</view>

		<button class="logout-btn" @click="handleLogout">退出登录</button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			userInfo: {
				nickname: '用户名',
				userId: '12345678',
				deviceCount: 3,
				sceneCount: 2,
				notificationCount: 5,
				accessibilityEnabled: false
			}
		}
	},
	methods: {
		handleEditProfile() {
			uni.showToast({
				title: '编辑个人资料',
				icon: 'none'
			})
		},
		handleMenu(type) {
			const menuActions = {
				account: '账号管理',
				notification: '消息通知',
				scenes: '场景管理',
				about: '关于我们'
			}
			const routes = {
				account: '/pages/account/account',
				notification: '/pages/notification/notification',
				scenes: '/pages/scenes/scenes',
				about: '/pages/about/about'
			}
			
			if (routes[type]) {
				uni.navigateTo({
					url: routes[type]
				})
			}
		},
		handleLogout() {
			uni.showModal({
				title: '退出确认',
				content: '确定要退出登录吗？',
				confirmColor: '#ff4d4f',
				success: (res) => {
					if (res.confirm) {
						uni.reLaunch({
							url: '/pages/login/login'
						})
					}
				}
			})
		}
	}
}
</script>

<style lang="scss">
.mine-container {
	min-height: 100vh;
	background: linear-gradient(to bottom, #f6f7f9, #ffffff);
	padding: 30rpx;
	
	.user-card {
		background: #ffffff;
		border-radius: 24rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.05);
		margin-bottom: 30rpx;
		
		.user-header {
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;
			
			.avatar-section {
				position: relative;
				margin-right: 24rpx;
				
				.avatar {
					width: 120rpx;
					height: 120rpx;
					border-radius: 60rpx;
					border: 4rpx solid #fff;
					box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
				}
				
				.edit-avatar {
					position: absolute;
					right: -4rpx;
					bottom: -4rpx;
					width: 40rpx;
					height: 40rpx;
					background: #007AFF;
					border-radius: 20rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border: 4rpx solid #fff;
				}
			}
			
			.info {
				flex: 1;
				
				.nickname-row {
					display: flex;
					align-items: center;
					margin-bottom: 8rpx;
					
					.nickname {
						font-size: 36rpx;
						font-weight: 600;
						margin-right: 12rpx;
					}
				}
				
				.user-id {
					font-size: 24rpx;
					color: #666;
				}
			}
		}
		
		.user-stats {
			display: flex;
			justify-content: space-around;
			padding-top: 20rpx;
			border-top: 2rpx solid #f5f5f5;
			
			.stat-item {
				text-align: center;
				
				.number {
					font-size: 32rpx;
					font-weight: 600;
					color: #333;
					display: block;
					margin-bottom: 4rpx;
				}
				
				.label {
					font-size: 24rpx;
					color: #666;
				}
			}
		}
	}
	
	.menu-section {
		.menu-group {
			background: #ffffff;
			border-radius: 24rpx;
			margin-bottom: 24rpx;
			padding: 0 20rpx;
			box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.05);
			
			.menu-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx 10rpx;
				border-bottom: 2rpx solid #f5f5f5;
				
				&:last-child {
					border-bottom: none;
				}
				
				.menu-left {
					display: flex;
					align-items: center;
					
					.menu-title {
						font-size: 28rpx;
						color: #333;
						margin-left: 16rpx;
					}
				}
				
				.menu-right {
					display: flex;
					align-items: center;
					
					.menu-desc {
						font-size: 24rpx;
						color: #999;
						margin-right: 8rpx;
					}
					
					.menu-badge {
						background: #ff4d4f;
						color: #fff;
						font-size: 20rpx;
						padding: 2rpx 12rpx;
						border-radius: 20rpx;
						margin-right: 8rpx;
					}
				}
			}
		}
	}
	
	.logout-btn {
		width: 90%;
		margin: 40rpx auto;
		background: #ff4d4f;
		color: #fff;
		border-radius: 45rpx;
		font-size: 32rpx;
		padding: 20rpx 0;
		box-shadow: 0 4rpx 12rpx rgba(255,77,79,0.3);
		
		&:active {
			transform: scale(0.98);
		}
	}
}
</style> 